
<template>
  <div id="addressEdit">
    <div class="top">
      <input v-model="recieveName" type="text" placeholder="联系人">
      <input v-model="mobile" type="number" placeholder="联系电话">
    </div>
    <div class="middle">
      <div class="one" @click="showAddress = true">
        <span>所在地区：{{cityX}}</span>
        <x-address
          @on-hide="logHide"
          @on-show="logShow"
          title
          v-model="area"
          :list="addressData"
          @on-shadow-change="onShadowChange"
          placeholder
          inline-desc
          :show.sync="showAddress" 
        ></x-address>
        <img src="../../../wechat/static/images/dzyhzx_next.png" alt>
      </div>
      <div class="two">
        <textarea v-model="address" name id cols="30" rows="4" placeholder="详细地址：如道路、门牌号、小区、楼栋等"></textarea>
      </div>
      <div class="three">
        <x-switch title="设为默认" v-model="isDefault" @on-click="switchChange"></x-switch>
      </div>
      <div class="four">
        <a href="javascript:;" @click="save">保存</a>
      </div>
    </div>
  </div>
</template>

<script>
import { XSwitch, XAddress, ChinaAddressV4Data } from "vux";
export default {
  name: "addressEdit",
  data() {
    return {
      showAddress: false,
      area: [],
      addressData: ChinaAddressV4Data,
      address: "", //v收货人地址
      id: this.$route.query.id, //主键id
      isDefault: true, //是否为默认地址
      city: "",
      cityX: "",
      mobile: "", //收货人手机号
      recieveName: "", //收货人姓名
      userId: localStorage.getItem("userId")||'', //所属用户id
      province:'',
      city:'',
      district:''
    };
  },
  mounted() {
    if(this.id)this.getDetail();
  },
  created() {},
  methods: {
    logShow() {
      console.log("logShow");
      // var cancel = document.getElementsByClassName("vux-popup-header-left")[0];
      // var finish = document.getElementsByClassName("vux-popup-header-right")[0];
      // cancel.innerHTML = "";
      // finish.innerHTML = "";
    },
    logHide(value) {
      console.log("logHide");
      console.log(value);
      if(value){
        // this.cityX = this.city;
      }
    },
    save() {
      if (!this.cityX || !this.address || !this.mobile || !this.recieveName) {
        this.$vux.toast.show({
          text: "所填信息不能为空",
          type: "warn",
              width: 'auto'
        });
        return;
      }
      let url =
        this.$CONSTANT.ADDRESS.saveEsUserAddress +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        address: this.cityX+'--' + this.address,
        id: this.id,
        isDefault: this.isDefault?'y':'n',
        mobile: this.mobile,
        recieveName: this.recieveName,
        userId: this.userId,
        province : this.province,
        city : this.city,
        district :this.district
      };
      this.$vux.loading.show({
        text: '正在提交数据'
      })
      setTimeout(() => {
        this.$common.post(url, param, res => {
          this.$vux.loading.hide()
          if (res.status == 200) {
            var bussData = res.data.bussData;
            this.$vux.toast.show({
              text: res.msg,
              type: "",
              width: 'auto'
            });
            setTimeout(() => {
              this.$router.back()
            }, 1000);
          } else {
            this.$vux.toast.show({
              text: res.msg,
              type: "warn",
              width: 'auto'
            });
          }
        });
      }, 1000);
      
    },
    getDetail() {
      let url =
        this.$CONSTANT.ADDRESS.findEsUserAddressById +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        id: this.id
      };
      // this.$vux.loading.show({
      //   text: "loading"
      // });
      this.$common.post(url, param, res => {
        setTimeout(() => {
          this.$vux.loading.hide()
        }, 500);
        if (res.status == 200) {
          var bussData = res.data.bussData;
          this.cityX = bussData.address.split('--')[0],
          this.address = bussData.address.split('--')[1],
          // this.address = bussData.address;
          this.isDefault = bussData.isDefault=='y'?true:false;
          this.mobile = bussData.mobile;
          this.recieveName = bussData.recieveName;
          this.province = bussData.province
          this.city = bussData.city
          this.district = bussData.district
        } else {
          this.$vux.toast.show({
              text: res.msg,
              type: "warn"
            });
        }
      });
    },
    switchChange() {},
    onShadowChange(ids, names) {
      this.province = ids[0]
      this.city = ids[1]
      this.district = ids[2]
      this.cityX = names[0] + names[1] + names[2];

    }
  },
  components: {
    XAddress,
    XSwitch
  }
};
</script>

<style lang="less">
#addressEdit {
  .top {
    padding: 0 11px;
    background: #fff;
    input {
      display: block;
      width: 100%;
      border-bottom: none;
      padding: 20px 0;
      // height: 54px;
      // line-height: 54px;
      color: #343434;
      font-family: PingFang-SC-Medium;
      font-size: 15px;
      &:last-child {
        border-top: 1px solid #e1e1e1;
      }
    }
  }
  .middle {
    margin-top: 8px;
    .one {
      background: #fff;
      padding: 0 11px;
      height: 55px;
      line-height: 55px;
      position: relative;
      border-bottom: 1px solid #e1e1e1;
      span {
        color: #343434;
        font-family: PingFang-SC-Medium;
        font-size: 15px;
      }
      img {
        position: absolute;
        top: 24px;
        right: 10px;
        float: right;
        width: 5px;
        height: 8px;
        // margin: 24px 0 0 0;
      }
      .vux-cell-box {
        display: none;
        &:before {
          border: none;
        }
      }
    }
    .two {
      background: #fff;
      padding: 0 11px;
      textarea {
        padding: 20px 0 0 0;
        color: #343434;
        font-family: PingFang-SC-Medium;
        font-size: 15px;
        width: 100%;
        resize: none;
        border: none;
      }
    }
    .three {
      background: #fff;
      margin-top: 8px;
      padding: 0 11px;
      .vux-x-switch {
        padding: 21px 0;
        .weui-cell__bd {
          display: inline-block;
          .weui-label {
            color: #343434;
            font-family: PingFang-SC-Medium;
            font-size: 15px;
          }
        }
        .weui-cell__ft {
          display: inline-block;
          float: right;
          .weui-switch {
            width: 44px;
            height: 27px;
            padding-top: 0px;
            padding-right: 0px;
            padding-bottom: 0px;
            padding-left: 0px;
            &:before {
              width: 44px;
              height: 27px;
            }
            &:after {
              width: 27px;
              height: 26px;
            }
            &:checked:after {
              -webkit-transform: translateX(17px);
              transform: translateX(17px);
            }
          }
        }
      }
    }
    .four {
      margin-top: 167px;
      text-align: center;
      a {
        display: inline-block;
        height: 45px;
        width: 61%;
        text-align: center;
        line-height: 45px;
        background: #ee3c4a;
        color: #fff;
        font-size: 15px;
        font-family: PingFang-SC-Bold;font-weight: 600;
        border: 1px solid transparent;
        border-radius: 23px;
      }
    }
  }
}
</style>
